<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小林下载工具包</title>
    <link rel="stylesheet" href="popup.css">
    <style>
        /* 新增样式 */
        .popup-container {
            width: 400px;
            max-width: 100%;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 15px;
            background: #f8f9fa;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .header-actions {
            display: flex;
            align-items: center;
        }
        
        .settings-btn {
            background: none;
            border: none;
            cursor: pointer;
            margin-right: 10px;
            font-size: 16px;
            color: #666;
        }
        
        .file-info {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        
        .file-icon {
            width: 32px;
            height: 32px;
            margin-right: 10px;
        }
        
        .file-details {
            flex: 1;
        }
        
        .file-name {
            font-weight: bold;
            margin-bottom: 5px;
            word-break: break-all;
        }
        
        .file-size {
            color: #666;
            font-size: 12px;
        }
        
        .progress-container {
            margin: 15px 0;
            display: none;
        }
        
        .progress-bar {
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: #4CAF50;
            width: 0%;
            transition: width 0.3s;
        }
        
        .progress-text {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
        
        .download-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin: 15px 0;
        }
        
        .download-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: #fff;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .download-btn:hover {
            background: #f5f5f5;
            border-color: #aaa;
        }
        
        .download-btn img {
            width: 24px;
            height: 24px;
            margin-bottom: 5px;
        }
        
        .download-btn span {
            font-size: 12px;
        }
        
        .safety-warning {
            padding: 8px 12px;
            background: #FFF3E0;
            border-left: 4px solid #FF9800;
            margin: 10px 0;
            font-size: 12px;
            display: none;
        }
        
        .error-message {
            padding: 8px 12px;
            background: #FFEBEE;
            border-left: 4px solid #F44336;
            margin: 10px 0;
            font-size: 12px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="popup-container">
        <div class="header">
            <h3>下载管理</h3>
            <div class="header-actions">
                <button class="settings-btn" id="settingsBtn" title="设置">⚙️</button>
                <button class="close-btn" id="closeBtn">×</button>
            </div>
        </div>
        
        <div class="content">
            <!-- 文件信息区域 -->
            <div class="file-info">
                <img src="icons/file-icon.png" alt="文件" class="file-icon" id="fileTypeIcon">
                <div class="file-details">
                    <div class="file-name" id="fileNameDisplay">文件名加载中...</div>
                    <div class="file-size" id="fileSizeDisplay">大小: 计算中...</div>
                </div>
            </div>
            
            <!-- 安全警告 -->
            <div class="safety-warning" id="safetyWarning">
                注意: 此下载链接可能不安全。请确认来源可靠后再继续。
            </div>
            
            <!-- 错误消息 -->
            <div class="error-message" id="errorMessage"></div>
            
            <!-- 下载进度 -->
            <div class="progress-container" id="progressContainer">
                <div class="progress-bar">
                    <div class="progress-fill" id="progressFill"></div>
                </div>
                <div class="progress-text">
                    <span id="progressPercent">0%</span>
                    <span id="progressSpeed">0 KB/s</span>
                    <span id="progressRemaining">剩余时间: 计算中...</span>
                </div>
            </div>
            
            <!-- 下载信息表单 -->
            <div class="field">
                <label>链接：</label>
                <input type="text" id="downloadUrl" readonly>
            </div>
            <div class="field">
                <label>文件名：</label>
                <input type="text" id="fileName">
            </div>
            <div class="field">
                <label>保存位置：</label>
                <div class="save-location">
                    <input type="text" id="savePath" readonly>
                    <button id="browseBtn">选择目录</button>
                </div>
            </div>
            
            <!-- 下载按钮 -->
            <div class="download-buttons">
                <button class="download-btn" id="chromeBtn">
                    <img src="icons/chrome-icon.png" alt="Chrome">
                    <span>Chrome</span>
                </button>
                <button class="download-btn" id="thunderBtn">
                    <img src="icons/thunder-icon.png" alt="迅雷">
                    <span>迅雷</span>
                </button>
                <button class="download-btn" id="idmBtn">
                    <img src="icons/idm-icon.png" alt="IDM">
                    <span>IDM</span>
                </button>
            </div>
            
            <!-- 操作按钮 -->
            <div class="action-buttons">
                <button id="openBtn">打开文件</button>
                <button id="openFolderBtn">打开文件夹</button>
                <button id="cancelBtn">取消</button>
            </div>
        </div>
    </div>
    <script src="popup.js"></script>
</body>
</html>